<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">

        <div> person: {{person}}</div>
        <button @click="changePerson">修改数组</button>

    </div>
</body>
<script>

    Vue.config.productionTip = false; // 解决警告信息的

    const vm = new Vue({
      el: "#app",
      data() {
        return {
            person: ["唐僧","孙悟空","猪八戒"]
        };
      },

      methods: {
        changePerson(){

            // 这里仅讨论通过数组方法修改数据的情况，其他情况不作详解
            
            // 1.修改原数组的方式,直接修改原数组
            // this.person.push("沙和尚");

            // 2.返回新数组的方式，直接替换原来的数组
            this.person = this.person.map((item)=>{

                return item + " --出自西游记";

            });
        }
      },

    });

    /*
        vue对数组方法重新封装的伪代码
        
       
        function updateDOM(){  ③处
            
        }

        
        const oldPush = Array.prototype.push; ① 处

        
        Array.prototype.push = function(...rest){ ②处

            oldPush.call(this,...rest);

           
            updateDOM(); ④处


        }

    情景描述：
        它适用于简单且方便的函数式封装，一般用于对原有的官方函数做简单的封装处理

    适用过程：step1: 保留原有的旧push方法
             step2: 在数组原型对象上封装新的push方法
             step3: 封装更新DOM的方法
             step4: 调用更新DOM的方法

    难点：为啥要改变oldPush调用处的this指向

    推荐：首先，oldPush为原始官方的封装方法，它原本的调用环境是实例化的数组对象，若直接在新封装的push中调用，那么由于使用的是声明式函数，this在没开启严格模式时指向window, 开启后指向underfind,组件中指向null，所以需要使用call来改变this指向，确保原功能正常运作




    
    
    




    
    
    
    
    
    
    
    
    
    
    */ 







  </script>
</html>